<template>
  <div>
    <div class="header">
      <div class="chaxun">
        <p>查询</p>
      </div>
      <div>
        <div class="shousuo">
          搜索：<input type="text" placeholder="输入菜品名称、单号、收银员进行搜索" />
        </div>
        <br />
        <div class="block">
          <span>时间:</span>
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期"
            size="mini"
          >
          </el-date-picker>
          <span class="demonstration">至:</span>
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期"
            size="mini"
          >
          </el-date-picker>
          <span class="leibie">支付方式</span>
          <el-select v-model="value" placeholder="请选择" size="mini">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="neirong">
      <div class="shuju"><p>数据查询</p></div>
      <el-table :data="tableData"  border>
        <el-table-column prop="xuhao" label="序号" width="170" >
        </el-table-column>
        <el-table-column prop="mingcheng" label="单号" width="190" >
        </el-table-column>
        <el-table-column prop="bianma" label="桌位编号" width="190">
        </el-table-column>
        <el-table-column prop="leibie" label="金额" width="180" >
        </el-table-column>
        <el-table-column prop="danjia" label="优惠额度" width="180" >
        </el-table-column>
        <el-table-column prop="xiaoliang" label="收银员" width="187" >
        </el-table-column>
        <el-table-column prop="jine" label="时间" width="180" >
        </el-table-column>
      </el-table>
      <div class="fenye">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10, 20, 50,]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "炒菜",
        },
        {
          value: "选项2",
          label: "凉菜",
        },
      ],
      value: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",
     tableData: [{
          xuhao: '2016-05-02',
          mingcheng: '王小虎',
          bianma: '上海市普陀区金沙江路 1518 弄',
          leibie:'111',
          danjia:'222',
          xiaoliang:'333',
          jine:'444'

        }, 
        {
          xuhao: '2016-05-02',
          mingcheng: '王小虎',
          bianma: '上海市普陀区金沙江路 1518 弄',
          leibie:'111',
          danjia:'222',
          xiaoliang:'333',
          jine:'444'

        }, 
        {
          xuhao: '2016-05-02',
          mingcheng: '王小虎',
          bianma: '上海市普陀区金沙江路 1518 弄',
          leibie:'111',
          danjia:'222',
          xiaoliang:'333',
          jine:'444'

        }, 
        {
          xuhao: '2016-05-02',
          mingcheng: '王小虎',
          bianma: '上海市普陀区金沙江路 1518 弄',
          leibie:'111',
          danjia:'222',
          xiaoliang:'333',
          jine:'444'

        }, 
        {
          xuhao: '2016-05-02',
          mingcheng: '王小虎',
          bianma: '上海市普陀区金沙江路 1518 弄',
          leibie:'111',
          danjia:'222',
          xiaoliang:'333',
          jine:'444'

        }, 
     ],
      currentPage4: 10

    };
  },
};
</script>

<style scoped>
.header {
  height: 165px;

  border: 1px solid rgb(220, 220, 220);
}

.chaxun {
  width: 100%;
  height: 45px;
  background-color: rgb(200, 200, 200);
  line-height: 45px;
}
input{
  width: 300px;
  text-align: center;
}
p {
  margin-left: 20px;
}
.shousuo {
  margin-left: 20px;
  margin-top: 20px;
}
.block {
  margin-left: 20px;
}
.block > span {
  margin-right: 10px;
}
.demonstration {
  margin-left: 10px;
}
.leibie {
  margin-left: 10px;
}
.neirong {
  margin-top: 10px;
}
.shuju {
  height: 45px;
  background-color: rgb(200, 200, 200);
  border: 1px solid rgb(220, 220, 220);
  line-height: 45px;
}

.fenye{

  margin-top: 20px;

}
.el-table{
  margin-top:10px;
  
} 
.el-pagination{
  margin-left: 260px;
}

</style>